<template>
	<view>
		<el-row :gutter="20" style="padding: 20px;">
			<el-col :xs="24" :md="12">
				<el-card>
					<view style="margin-bottom: 10px;">
						用户： {{userInfo.username}}
					</view>
					<view style="margin-bottom: 10px;">
						昵称： {{userInfo.nickname}}
					</view>
					<view style="margin-bottom: 10px;">
						性别： {{userInfo.sex}}
					</view>
					<view style="margin-bottom: 10px;">
						权限：
						<el-tag v-if="userInfo.roles=='super'" type="primary">超级管理员</el-tag>
						<el-tag v-else type="primary">代理商</el-tag>
					</view>
					<!-- v-if="userInfo.roles=='agent'" -->
					<view style="margin-bottom: 10px;">
						折扣率： {{userInfo.discount}}%
					</view>
					<view style="margin-bottom: 10px;">
						电话： {{userInfo.phone}}
					</view>
					<view style="margin-bottom: 10px;">
						邮箱： {{userInfo.mail}}
					</view>
					<view style="margin-bottom: 10px;">
						简介： {{userInfo.blurb}}
					</view>
					<view style="margin-bottom: 10px;">
						禁用状态： <el-switch disabled inline-prompt v-model="userInfo.state" active-text="是"
							inactive-text="否" />
					</view>
					<view style="margin-bottom: 10px;">
						分享id： {{userInfo.shareid}}
					</view>
					<view style="margin-bottom: 10px;">
						操作：
						<el-button type="primary" :loading="loading" @click="logout" class="btn">退出</el-button>
					</view>

				</el-card>
			</el-col>
			<el-col :xs="24" :md="12">
				<el-card>
					<view style="margin-bottom: 10px;">
						头像：<el-image style="width: 100%; height: auto" :src="userInfo.portrait" />
					</view>

					<view style="margin-bottom: 10px;">
						生日： {{userInfo.birthday}}
					</view>
					<view style="margin-bottom: 10px;">
						真实名字： {{userInfo.realname}}
					</view>
					<view style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;">
						会员{{coin}}：{{userInfo.reset?userInfo.reset:0}}
					</view>
					<view style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;">
						<el-tooltip :content="userInfo.exchange+'积分等于1'+coin" placement="top">
							积分：{{userInfo.balance}}
						</el-tooltip>
					</view>
					<view v-if="userInfo.roles =='super'"
						style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;">
						总积分配额：
						<view>
							<el-switch v-model="type" size="large" inline-prompt
								style="--el-switch-on-color: #409EFF; --el-switch-off-color: #13ce66" active-text="增加"
								inactive-text="减少" />
							<el-input-number :min="0" v-model="balance" />
							<button class="uni-button" :type="type?'primary':'warn'" size="mini"
								@click="submit">{{type?'增 加':'减 少'}}</button>
						</view>
					</view>
					<view style="margin-bottom: 10px;">
						会员时间： <uni-dateformat :date="userInfo.memberAt"></uni-dateformat>
					</view>
					<view style="margin-bottom: 10px;">
						修改时间： <uni-dateformat :date="userInfo.updatedAt"></uni-dateformat>
					</view>
					<view style="margin-bottom: 10px;">
						创建时间： <uni-dateformat :date="userInfo.createdAt"></uni-dateformat>
					</view>
				</el-card>
			</el-col>
		</el-row>
		<!-- <view class="uni-header">
			<view class="uni-group hide-on-phone">
				<view class="uni-title">{{$t('demo.table.title')}}</view>
			</view>
			<view class="uni-group">
				输入框
				<input class="uni-search" type="text" v-model="searchVal" @confirm="search"
					:placeholder="$t('common.placeholder.query')" />
				搜索按钮
				<button class="uni-button" type="default" size="mini"
					@click="search">{{$t('common.button.search')}}</button>
				添加按钮
				<button class="uni-button" type="primary" size="mini">{{$t('common.button.add')}}</button>
				批量删除按钮
				<button class="uni-button" type="warn" size="mini"
					@click="delTable">{{$t('common.button.batchDelete')}}</button>
			</view>
		</view>
		<view class="uni-container">
			表格组件
			<uni-table :loading="loading" border stripe type="selection" :emptyText="$t('common.empty')"
				@selection-change="selectionChange">
				<uni-tr>
					表头列  width="150" width="60" width="80" width="204"
					<uni-th align="center">用户</uni-th>
					<uni-th align="center">昵称</uni-th>
					<uni-th align="center">头像</uni-th>
					<uni-th width="150" align="center">姓名</uni-th>
					<uni-th align="center">会员时间</uni-th>
					<uni-th align="center">禁用状态</uni-th>
					<uni-th align="center">中币</uni-th>
					<uni-th align="center">设置</uni-th>
				</uni-tr>
				<uni-tr v-for="(item ,index) in tableData" :key="index">
					表格数据列
					<uni-td>{{item.username}}</uni-td>
					<uni-td>
						<view class="name">{{item.nickname}}</view>
					</uni-td>
					<uni-td><el-avatar shape="square" :src="item.portrait" /></uni-td>
					<uni-td>{{item.memberAt}}</uni-td>
					<uni-td>
						<el-switch @change="updateUserState(item)" :disabled="!$power('updateUserState')" inline-prompt
							v-model="item.state" active-text="是" inactive-text="否" />
					</uni-td>
					<uni-td>{{item.balance}}</uni-td>
					<uni-td>
						<view class="uni-group">
							编辑按钮
							<button v-if="$power('addUserBalance')" class="uni-button" @click="edit(item)" size="mini"
								type="primary">{{$t('common.button.edit')}}</button>
							删除按钮
							<button class="uni-button" size="mini" type="warn">{{$t('common.button.delete')}}</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box">
				分页组件
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
					@change="change" />
			</view> -->
		<!-- </view> -->
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>


<script>
	// 导入名为 "tableData" 的模块，路径为 './tableData.js'
	import tableData from './tableData.js'
	import {
		getUserList,
		addUserBalance,
		addBalance,
		updateBalance,
		updateUserState,
		getinfo,
		logout
	} from '@/api/pc';
	import config from '@/admin.config.js'
	import {
		Check,
		Close
	} from '@element-plus/icons-vue'
	// 导出默认模块
	export default {
		// 数据属性
		data() {
			return {
				// 搜索值
				searchVal: '',
				// 表格数据
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				// 加载状态
				loading: false,
				// ------- 新 ---------
				balance: 0,
				username: '',
				id: '',
				type: false
			}
		},
		computed: {
			userInfo() {
				return uni.getStorageSync("userInfo");
			}
		},
		// 页面加载时的处理函数
		onLoad() {
			// 重置选中项数组
			this.selectedIndexs = []
			// // 获取第一页数据
			// this.getData(1)
		},

		// 方法
		methods: {
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},

			// 多选事件处理函数
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},

			// 批量删除函数
			delTable() {
				this.selectedItems();
			},

			// 分页触发事件处理函数
			change(e) {
				this.getData(e.current)
			},
			// 搜索函数
			search() {
				this.getData(1, this.searchVal)
			},
			logout() {
				var that = this;
				this.$message("退出登录中...");
				logout({}).then(res => {
					if (res.code == 200) {
						that.$message.success(res.msg);
						uni.setStorageSync("token_expired", 0);
						uni.setStorageSync("token", '');
						this.$router.push({
							path: config.login.url,
						});
					} else {
						that.$message.error(res.msg);
					}

				}).catch(e => {
					console.log(e);
					that.$message.error(res.msg);
				})
			},
			submit() {
				var that = this;
				// console.log(e, e.state); 
				updateBalance({
					id: this.userInfo._id,
					balance: this.balance,
					type: this.type
				}).then(res => {
					if (res.code == 200) {
						that.$message.success(res.msg);
						that.getinfo();
					} else {
						that.$message.error(res.msg);
					}
				})
			},
			getinfo() {
				var that = this;
				getinfo().then(res => {
					// console.log('getinfo', res);
					if (res.code == 200) {
						var data = res.data;
						// 记录用户信息
						uni.setStorageSync("userInfo", data);
						uni.redirectTo({
							url: "/pages/user/index",
							fail: () => {
								uni.showModal({
									title: '提示',
									content: '页面 ' + url + ' 跳转失败',
									showCancel: false
								})
							}
						})
					}
				})
			},
			// 获取数据函数
			getData(pageCurrent, key = "") {
				this.loading = true
				this.pageCurrent = pageCurrent
				getUserList({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					key: key,
				}).then(res => {
					// console.log(res);
					if (res.code == 200) {
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					} else {
						this.$message.error(res.msg || '登录失败');
						this.tableData = []
						this.total = 0
						this.loading = false
					}
				})
			},
			// 伪request请求函数
			request(options) {
				console.log(options);
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options

				let total = tableData.length

				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})

				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' && success({
						data: data,
						total: total
					})
				}, 500)
			}
		}
	}
</script>


<style>
	/* #ifndef H5 */
	page {
		padding-top: 85px;
	}

	/* #endif */
</style>